<script>
import UFormItem from "../../../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UText from "../../../../../../../uni_modules/uview-ui/components/u-text/u-text.vue";
import { PLAN_TYPE } from "../../../../../../../constant";
import {findAllPlan} from "../../../../../../../api/customer";
import {uploadFile} from "../../../../../../../static/utils/uploadImg";
import imageUpload from "../../../../../../../components/base/image-upload/index.vue";
import uSelect from "../../../../../../../components/base/u-select/index.vue";
export default {
  name: "index",
  computed: {
    PLAN_TYPE() {
      return PLAN_TYPE
    },
  },
  components: {imageUpload, UText, UFormItem, uSelect},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
      showSchemeType: false,
      showSchemeName: false,
      curIndex: 0,
      planList: [],
      planTypeList: [],
      planNameList: [],
      attach: [],
      designDrawingsName: [],
    }
  },
  mounted() {
    this.getPlanLTypeList();
  },
  watch: {
    "formData.schemeType": {
      handler: function (val, oldVal) {
        if (val === PLAN_TYPE.STANDARD) {
          this.planList = [{
            typeName: this.$props.formData.schemeTypeName,
            typeId: this.$props.formData.schemeTypeId,
            name: this.$props.formData.schemeName,
            id: this.$props.formData.schemeId,
            attach: this.$props.formData.attach2, // 接口无参考图纸字段
            schemeId: this.$props.formData.schemeId,
          }]
          return
        }
        if (!this.$props.formData.composePlanVOList || this.$props.formData.composePlanVOList.length === 0){
          this.$props.formData.composePlanVOList = [{
            typeName: '',
            typeId: '',
            name: '',
            id: '',
            attach: '',
            schemeId: '',
          }]
          return;
        }
        this.planList = this.$props.formData.composePlanVOList?.map(item => {
          return {
            typeName: item.planType,
            typeId: item.planTypeId,
            name: item.name,
            id: item.planId,
            attach: item.attach,
            schemeId: item.schemeId,
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 获取方案列表
    async getPlanLTypeList() {
      const { data } = await findAllPlan();
      this.planTypeList = data;
    },
    schemeTypeNameChange(selection, plan) {
      // plan.lanTypeId  =typeId,
      // plan = Object.assign(plan, selection);
      this.planNameList = selection.plans;
      // plan.planId = selection.id;
      // console.log(selection, 2222)
      this.handleFormData();
    },
    // 选择方案名称
    schemeNameChange(selection, plan) {
      plan.planTypeId = selection.planTypeId;
      plan.planType = selection.planType;
      // plan.planId = selection.id;
      plan.name = selection.name;
      plan.attach = selection.attach;
      plan.schemeId = selection.id;
      this.handleFormData();
    },
    // 组装formData
    handleFormData() {
      if (this.$props.formData.schemeType === PLAN_TYPE.STANDARD) {
        this.$props.formData.schemeTypeId = this.planList[0].typeId;
        this.$props.formData.schemeTypeName = this.planList[0].typeName;
        this.$props.formData.schemeId = this.planList[0].schemeId;
        this.$props.formData.schemeName = this.planList[0].name;
        this.$props.formData.attach = this.planList[0].attach;
        this.$props.formData.composePlanVOList = [];
      } else {
        this.$props.formData.composePlanVOList = this.planList.map(item => {
          return {
            planTypeId: item.planTypeId,
            planType: item.typeName,
            planId: item.schemeId,
            name: item.name,
            attach: item.attach,
            schemeId: item.schemeId,
          }
        })
      }
    },
    addPlan() {
      this.planList.push({
        typeName: "",
        typeId: "",
        name: "",
        id: "",
        attach: "",
        schemeId: "",
      })
      this.handleFormData();
    },
    deletePlan(index) {
      this.planList.splice(index, 1);
      this.handleFormData();
    },
  },
}
</script>

<template>
  <view>
    <u-form-item
        label="设计方案"
        prop="formData.schemeType"
        borderBottom
        ref="item1"
    >

      <u-radio-group
          v-model="formData.schemeType"
          placement="row"
          class="radio-group"
      >
        <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="标准方案" :name="PLAN_TYPE.STANDARD"></u-radio>
        <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="组合方案" :name="PLAN_TYPE.COMBINATION"></u-radio>
      </u-radio-group>
    </u-form-item>
    <view v-for="(plan, index) in planList" :key="index">
      <u-form-item
          label="方案类型"
          :prop="plan.typeName"
          borderBottom
          borderTop
          ref="item1"
      >
        <u-select
            v-model="plan.typeName"
            placeholder="请选择方案类型"
            :options="planTypeList"
            :disabled="disabled"
            :props="{label: 'name', value: 'name'}"
            @change="(selection) => schemeTypeNameChange(selection, plan)"
        ></u-select>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="方案名称"
          :prop="plan.name"
          borderBottom
          ref="item1"
      >
        <u-select
            v-model="plan.name"
            placeholder="请选择方案名称"
            :options="planNameList"
            :disabled="disabled"
            :props="{label: 'name', value: 'name'}"
            @change="(selection) => schemeNameChange(selection, plan)"
        ></u-select>
        <view>{{plan.name}}</view>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="参考图纸"
          :prop="plan.attach"
          ref="item1"
          :borderBottom="formData.schemeType === PLAN_TYPE.STANDARD"
      >
        <image-upload v-model="plan.attach" @change="handleFormData"/>
      </u-form-item>
      <view class="plus" v-if="formData.schemeType === PLAN_TYPE.COMBINATION">
        <u--text
            v-if="index === 0"
            class="text"
            prefixIcon="plus"
            iconStyle="font-size: 14px;margin-right:5px;color:#009999;"
            color="#009999"
            @click="addPlan"
            text="新增方案"
        ></u--text>
        <u--text
            v-else
            class="text"
            prefixIcon="trash"
            iconStyle="font-size: 16px;margin-right:5px;color:red;"
            color="red"
            @click="deletePlan(index)"
            text="删除"
        ></u--text>
      </view>
    </view>
    <u-form-item
        label="设计图纸"
        prop="formData.designDrawings"
        borderBottom
        ref="item1"
    >
      <image-upload v-model="formData.designDrawings" />
    </u-form-item>
    <!--<u-action-sheet-->
    <!--    :show="showSchemeType"-->
    <!--    :actions="planTypeList"-->
    <!--    title="方案类型"-->
    <!--    @close="showSchemeType = false"-->
    <!--    @select="schemeTypeNameChange"-->
    <!--&gt;-->
    <!--</u-action-sheet>-->
    <!--<u-action-sheet-->
    <!--    :show="showSchemeName"-->
    <!--    :actions="planNameList"-->
    <!--    title="方案名称"-->
    <!--    @close="showSchemeName = false"-->
    <!--    @select="schemeNameChange"-->
    <!--&gt;-->
    <!--</u-action-sheet>-->
  </view>
</template>

<style scoped lang="scss">

.plus{
  text-align: center;
  padding: 10px 0px 20px 0;
  border-bottom: 1px solid #eee;
  color: #888;
  .text{
    justify-content: center !important;
  }
}
</style>
